<template>
	<view class="content">
		<u-loading-page :loading="isLoading" loading-text="加载中......" loading-mode="semicircle"></u-loading-page>
		<view style="width: 90%;margin-top: 5%;">
			<u-search placeholder="请输入图书名称" v-model="keyword"></u-search>
		</view>
		<view v-if="!isLoading" class="content-body" style="overflow-y: auto">

			<view class="content-body-item" v-for="(book, index) in bookList" :key="book.id">
				<view class="content-body-item-photo" @click="handleBookDetail(book.id)">
					<image v-if="book.photo != null" style="width: 70px; height: 100%" :src="book.photo"></image>
					<view v-if="book.photo == null"
						style="width: 70px; height: 100%;display: flex;justify-content: center;flex-direction: column;background-color: lightgrey;align-items: center;">
						暂无图片</view>
				</view>
				<view class="content-body-item-text" @click="handleBookDetail(book.id)">
					<text style="font-size: 15px; font-weight: bold">{{ book.name }}</text>
					<text
						style="font-size: 12px; margin-top: 13px; color: #696969; font-weight: bold">作者：{{ book.author }}</text>
					<text
						style="font-size: 12px; color: #696969; font-weight: bold;margin-top: 5%;">出版社：{{ book.press }}</text>
				</view>
				<view class="content-body-item-button">
					<u-icon bold name="star-fill" label="已收藏" labelSize="12px"
						@click="handleCancelCollection(book.id)"></u-icon>
				</view>
			</view>
			<u-loadmore :status="status" nomoreText="没有更多了" color="#000000" @loadmore="loadmore" />
		</view>
		<view>
			<u-modal content="是否取消收藏此图书？" :show="show3" showCancelButton closeOnClickOverlay @confirm="confirm"
				@cancel="cancelShow()" @close="cancelShow()"></u-modal>
		</view>
		<view>
			<u-modal content="是否将该图书加入书架？" :show="show5" showCancelButton closeOnClickOverlay
				@confirm="confirmBookShelf" @cancel="cancelShow5()" @close="cancelShow5()"></u-modal>
		</view>
		<view>
			<u-modal content="是否将该图书从书架中移除？" :show="show6" showCancelButton closeOnClickOverlay
				@confirm="confirmremoveBookShelf" @cancel="cancelShow6()" @close="cancelShow6()"></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		bookCancelCollection,
		collectionList
	} from '@/api/book'
	import config from '@/config';
	import {
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	export default {
		data() {
			return {
				show6: false,
				show5: false,
				show3: false,
				isLoading: false,
				status: 'loadmore',
				bookList: [],
				bookId: 0
			};
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			// 模拟数据请求
			setTimeout(() => {
				this.getList()
				uni.stopPullDownRefresh(); // 停止刷新动画（必须调用！）
			}, 1000);
		},
		mounted() {
			this.getList()
		},
		methods: {
			async getList() {
				this.isLoading = true;
				const res = await collectionList();
				if (res.code == 200) {
					this.bookList = res.rows;
					this.bookList.forEach(item => {
						if (item.photo != null) {
							item.photo = config.baseUrl + item.photo
						}
					})
					this.isLoading = false
				}
			},
			loadmore() {
				this.status = 'nomore';
			},
			handleBookDetail(id) {
				uni.navigateTo({
					url: `/book/book-detail/index?bookId=${id}`
				});
			},
			handleCancelCollection(id) {
				this.bookId = id
				this.show3 = true
			},

			cancelShow() {
				this.show3 = false
			},
			async confirm() {
				const res = await bookCancelCollection("2", this.bookId);
				if (res.code == 200) {
					uni.showToast({
						title: "取消成功"
					})
					this.show3 = false
					this.getList()
				}
			},
			cancelShow5() {
				this.show5 = false
			},
			cancelShow6() {
				this.show6 = false
			},
			handleBookShelf() {
				this.show5 = true
			},
			handleremoveBookShelf() {
				this.show6 = true
			},
			async confirmremoveBookShelf(bookId) {
				const res = await removeBookShelf("2", bookId);
				if (res.code == 200) {
					uni.showToast({
						title: "移除成功"
					})
					this.show6 = false
					this.bookInfo.isBookShelf = '0'
				}
			},
			async confirmBookShelf(bookId) {
				const res = await joinBookShelf("2", bookId);
				if (res.code == 200) {
					uni.showToast({
						title: "加入成功"
					})
					this.show5 = false
					this.bookInfo.isBookShelf = '1'
				}
			}
		}
	};
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.content-body {
		margin-top: 20px;
		width: 90%;
		height: 100%;
	}

	.content-body-item {
		width: 100%;
		height: 100%;
		display: flex;
		gap: 10px;
		align-items: center;
		margin-bottom: 10%;
	}

	.content-body-item-photo {
		width: 80px;
		height: 100px;
		border-radius: 5px;
	}

	.content-body-item-text {
		width: 170px;
		height: 100px;
		display: flex;
		/* 改为flex布局，但方向保持默认（row），用于内部文本垂直对齐调整 */
		flex-direction: column;
		/* 改为列方向布局 */
		/* justify-content: center; */
		/* 垂直居中，可选，根据需要调整 */
		align-items: flex-start;
		/* 文本左对齐 */
		/* 移除 margin-left，因为现在是列布局 */
		padding: 0 15px;
		/* 可选，增加一些内边距使文本不贴边 */
	}

	/* 注意：这里的 text 选择器可能需要根据你实际使用的框架或环境进行调整，
	   如果 text 不是一个可以直接通过 CSS 选择的元素，你可能需要通过类名或其他方式选择它。
	   但在这个示例中，我们假设它可以直接被选中。 */

	.content-body-item-button {
		width: 20%;
		/* background-color: black; */
		margin-left: 12px;
		flex-direction: column;
		display: flex;
		align-items: flex-end;
	}
</style>